<script lang="ts" setup name="PrintDialog">
import { reactive, ref, watch } from "vue";
import { ElForm } from "element-plus";
interface Props {
  dialogVisible: boolean;
  id?: number;
}
interface TableList {
  copies: number;
  id?: number;
  key: string;
  name: string;
  sn: string;
  storeId?: number;
  templateId: number;
}

const props = ref<Props>({
  dialogVisible: true,
  id: 0
});

const acceptParams = (params: Props) => {
  props.value = params;
  formData.value.id = params.id;
};
const formData = ref<TableList>({
  copies: 1,
  key: "",
  name: "",
  sn: "",
  templateId: 1,
  id: 0
});

const rules = {
  name: [{ required: true, message: "请输入打印机名称" }],
  sn: [{ required: true, message: "请输入序列号" }],
  key: [{ required: true, message: "请输入打印机KEY" }]
};

watch(
  () => props.value.dialogVisible,
  val => {
    if (!val) {
      formData.value = {
        copies: 1,
        key: "",
        name: "",
        sn: "",
        templateId: 1
      };
    }
  }
);

const printType = reactive<{ name: string; value: number }[]>([
  { name: "结账单", value: 1 },
  { name: "厨房单", value: 2 }
]);

const activeName = ref("first");

const printTest = () => {};
const onDel = () => {
  if (formData.value.id) {
    console.log(formData.value.id);
  }
};

const form = ref<InstanceType<typeof ElForm>>();
const onSubmit = async () => {
  await form.value?.validate();
  props.value.dialogVisible = false;
  form.value?.resetFields();
};

defineExpose({ acceptParams });
</script>

<template>
  <div class="print-dialog">
    <el-dialog v-model="props.dialogVisible" title="云打印设置" width="600" style="min-height: 500px">
      <el-form
        ref="form"
        class="form"
        :rules="rules"
        :model="formData"
        label-width="120px"
        label-position="left"
        label-suffix="："
      >
        <el-tabs stretch v-model="activeName" class="demo-tabs">
          <el-tab-pane label="云打印设置" name="first">
            <div class="top">
              <div class="name">打印机1</div>
              <!-- v-if="formData.id" -->
              <div style="flex: 1; font-size: 16px; color: #6c6c6c; text-align: center">已添加</div>
              <div class="print-pager" @click="printTest">打印测试单</div>
              <div class="delete" @click="onDel">
                <el-icon size="20"><Delete /></el-icon>
              </div>
            </div>
            <el-form-item label="打印机名称" prop="name">
              <el-input placeholder="请输入" v-model="formData.name" style="width: 70%"></el-input>
            </el-form-item>
            <el-form-item label="序列号(SN)" prop="sn">
              <el-input placeholder="请输入" v-model="formData.sn" style="width: 70%"></el-input>
            </el-form-item>
            <el-form-item label="打印机KEY" prop="key">
              <el-input v-model="formData.key" placeholder="请输入" style="width: 70%"></el-input>
            </el-form-item>
          </el-tab-pane>

          <el-tab-pane label="小票格式" name="second">
            <el-form-item label="打印类型" prop="templateId">
              <el-select style="width: 70%" v-model="formData.templateId" placeholder="请选择">
                <el-option v-for="item in printType" :key="item.value" :label="item.name" :value="item.value"> </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="打印份数" prop="copies">
              <el-input-number
                v-model="formData.copies"
                :controls="false"
                placeholder="请输入"
                style="width: 70%"
                :min="1"
              ></el-input-number>
            </el-form-item>
            <hr style="margin-top: 30px" color="#F3F4F6" />
            <div class="title">结账单</div>
            <div class="content">
              <div class="subhead">预览效果</div>
              <div class="preview"></div>
            </div>
          </el-tab-pane>
        </el-tabs>
      </el-form>

      <template #footer>
        <div class="dialog-footer">
          <el-button @click="props.dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="onSubmit"> 确认 </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<style lang="scss" scoped>
.print-dialog {
  padding: 20px;
  .form {
    padding: 30px;
    .top {
      display: flex;
      align-items: flex-end;
      height: 40px;
      padding-bottom: 7px;
      margin: 0 20px;
      margin-top: 10px;
      margin-bottom: 30px;
      border-bottom: 1px dashed #b8b8b8;
      .name {
        margin-left: 10px;
        font-size: 16px;
      }
      .print-pager {
        width: 90px;
        margin-right: 20px;
        font-size: 14px;
        line-height: 30px;
        color: #f3f4f6;
        text-align: center;
        background-color: #f3c45d;
        border-radius: 3px;
      }
    }
    .title {
      padding-left: 10px;
      margin-top: 20px;
      font-size: 18px;
      line-height: 25px;
      border-left: 3px solid #f3c35d;
    }
    .content {
      padding: 20px 50px;
      .subhead {
        color: #b8b8b8;
      }
      .preview {
        height: 300px;
        border: 1px solid #b8b8b8;
      }
    }
  }
}
</style>
